<template>
  <div class="FAQ">
    <h2 class="title">Frequently asked questions</h2>
    <div class="questionList">
      <van-collapse v-model="activeNames" class="custom-collapse">
        <van-collapse-item :title="item.question" :name="item.id" :key="item.id" v-for="item in faqItems">
          <template #right-icon>
            <van-icon :name="activeNames.includes(item.id) ? 'minus' : 'plus'" />
          </template>
          {{ item.answer }}
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { messages, locale } = useI18n();

const activeNames = ref([]);

const faqItems = computed(() => {
  // 获取当前语言包
  const currentMessages = messages.value[locale.value]
  // 安全访问路径
  return currentMessages?.faq?.items || []
})
</script>

<style scoped lang="less">
.FAQ {
  width: 100%;
  box-sizing: border-box;
  padding-top: 24px;
  .title {
    font-size: 20px;
color: rgba(0,0,0,0.95);
    text-align: center;
    padding-bottom: 20px;
  }
  .questionList {
    :deep(.van-cell) {
      background: none;
      padding-left: 0;
      padding-right: 0;
      padding-top: 21px;
      padding-bottom: 21px;
    }
    :deep(.van-cell__title) {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
    :deep(.van-collapse-item__content) {
      background: none;
      padding-top: 0;
    }
    :deep(.van-collapse-item__title--expanded:after){
      display: none;
    }
    :deep(.van-hairline--top-bottom:after){
      display: none;
    }
    :deep(.van-collapse-item--border:after){
      left: 0;
      right: 0;
      border-top: 1px dashed rgba(0, 0, 0, 0.1);
    }
    // :deep(.van-collapse-item__content){
    //   background: #fbfbfd;
    // }
    :deep(.custom-collapse .van-collapse-item:first-child ){
      border-top: none; /* 隐藏最上面的边框 */
    }
    :deep(.van-icon-plus:before){
      box-sizing: border-box;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      font-weight: 700;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 6px 6px 6px 6px;
      line-height: 16px;
      text-align: center;
    }
    :deep(.van-icon-minus:before){
       box-sizing: border-box;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      font-weight: 700;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 6px 6px 6px 6px;
      line-height: 16px;
      text-align: center;
    }
  }
}
</style>

<style>
.custom-collapse .van-collapse-item {
  border-top: none; /* 去掉顶部的边框 */
}
</style>
